<template>
  <div class="containner">
    <div class="toolbar">
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleClickAdd">添加习题集</el-button>
    </div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="习题集名称" width="180">
      </el-table-column>
      <el-table-column prop="speaker" label="主讲">
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间">
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="toolbar-btn" @click="handleClickEdit(scope.row)">编辑</span>
          <span class="toolbar-btn" @click="handleDeleteConfirm(scope.row)">删除</span>
          <span class="toolbar-btn" @click="toCourse(scope.row)">习题列表</span>
        </template>
      </el-table-column>
    </el-table>

    <add-group v-if="showGroup" @close="closeGroup" :id="id" :type="type" :title="title" @conmit="handleConmit">
    </add-group>

  </div>
</template>

<script>
import AddGroup from './components/AddGroup.vue'
import { getCourseQuestion, addCourseQuestion,editCourseQuestion,deleteCourseQuestion  } from "@/api/course";
export default {
  components: {
    AddGroup
  },
  data() {
    return {
      title: '添加习题集',
      showGroup: false,
      courseId: this.$route.query.id,
      list: [],
      type: '',
      id: ''
    }
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await getCourseQuestion({
        course_id: this.courseId
      })
      console.log(res.data)
      this.list = res.data
    },
    async addCourseQuestion(form) {
      let res = await addCourseQuestion(form);
      this.closeGroup();
      this.$message({
        message: '添加成功！',
        type: 'success'
      });
      this.getList();
    },
    async editCourseQuestion(form){
      let res = await editCourseQuestion(form);
      this.closeGroup();
      this.$message({
        message: '编辑成功！',
        type: 'success'
      });
      this.getList();
    },
    async deleteCourseQuestion(form){
      let res = await deleteCourseQuestion(form);
      this.$message({
        message: '删除成功！',
        type: 'success'
      });
      this.getList();
    },
    handleDeleteConfirm(item){
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteCourseQuestion(item)
      })
    },
    closeGroup() {
      this.showGroup = false;
    },
    handleClickEdit(item) {
      this.title = '编辑课程包';
      this.type = 'edit';
      this.id = item.id;
      this.showGroup = true;
    },
    handleClickAdd(item) {
      this.title = '添加课程包';
      this.type = 'add';
      this.showGroup = true;
    },
    toCourse(item) {
      this.$router.push({
        path: '/exercises/course',
        query:{
          id:item.id
        }
      })
    },
    handleConmit(form) {
      if (this.type === 'add') {
        form['course_id'] = this.courseId
        this.addCourseQuestion(form);
        return false;
      }
      if (this.type === 'edit') {
        form['course_id'] = this.courseId;
        form['id'] = this.id
        this.editCourseQuestion(form);
        return false;
      }

    }
  },
}
</script>
<style lang="scss" scoped>
.containner {
  padding: 30px;
}

.toolbar {
  background-color: #fff;
  margin-bottom: 20px;
}
</style>
